<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外间距测试-盒子模型</title>
    <style>
        /* 1. 去除body默认自带的四个方向的8像素的margin(外间距) */
        body {
            margin: 0;
        }
        /* 2. 最后的.3代表不透明度 1为不透明 0为完全透明 */
        .fu {
            background-color: rgba(255,255,0,.3);
            /* 4.2 overflow: 溢出 - 给父元素设置BFC(块级格式化上下文)结界 此时父元素和子元素的间距处不会重叠粘连 */
            /* 4.2 给父元素设置BFC结界 把首尾个子级元素超出的外间距包裹在内 */
            overflow: hidden;
        }
        /*
            3. 选择子元素的便捷操作
            3. div默认宽度为其父级宽度的100% 未添加内容时默认高度为0
                例如.fu的宽度与其父级body同宽 body的宽度为整个屏幕的宽度
        */
        .fu>div {
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,255,.6);
            border: 2px solid #00f;
            color: #fff;
        }
        /* 4.1 当元素之间间距产生在同一位置时(如下) 间距取大值显示 (相邻元素垂直方向的外间距取大值显示 不会叠加) */
        .z1 {
            margin-bottom: 30px;/* 4.1 小值不显示 */
            margin-top: 50px;/* 4.2 父子粘连问题 第一个子元素的上外间距会超出父元素的上外间距范围 */
        }
        .z2 {
            margin-top: 50px;/* 4.1 大值显示 */
        }
        .z4 {
            margin-bottom: 50px;/* 4.2 父子粘连问题 最后一个子元素的下外间距会超出父元素的下外间距范围 */
        }
        /* 5. 间距赋值问题 */
        .z3 {
            margin: 10px;/* 默认四个方向同为10像素 */
            margin: 10px 20px 30px 40px;/* 默认顺时针上右下左顺序赋值 */
            margin: 10px 20px;/* 顺时针赋值 下和左无值可赋 则会寻找相对的方向进行赋值 */
            margin: 10px 20px 30px;/* 同理 上为10px 右为20px 下为30px 左无值可赋 寻找对边赋20px */
            /* 上下不设置值 显式设置为0占位 左右值设为auto 让浏览器自动计算为相等的值 实现块级元素的水平居中效果 注意: 行内元素无法使用该方法 */
            margin: 0 auto;
        }
        /* 6. 行内元素的外间距 */
        span {
            border: 2px solid #f00;
        }
        .s2 {
            margin: 30px 20px;/* 行内元素的垂直方向的外间距不生效 不要使用 */
        }
    </style>
</head>
<body>
<h1>测试文字</h1>
<hr>
<!-- 2. .fu>.z*4 + tab: 创建一个class值为fu的父级div 内置4个class值为z的子级div -->
<div class="fu">
    <div class="z1">子元素div1</div>
    <div class="z2">子元素div2</div>
    <div class="z3">子元素div3</div>
    <div class="z4">子元素div4</div>
</div>
<hr>
<!--回车折叠: span元素之间的回车或多个空格都会进行折叠 变为一个空格的间距显示-->
<span>span1</span><span class="s2">span2</span><span>span3</span>
</body>
</html>